<script setup>
import { reactive, toRefs, computed } from "vue";

const data = reactive({
  addList: [],
  input: "",
});
// 点击添加
const addInfo = () => {
  // 要添加的数据
  let obj = {
    name: data.input,
    data: new Date().toLocaleString(),
    flg: false,
  };
  // 添加到数组中
  data.addList.push(obj);
  data.input = "";
};
// 点击删除
const del = (index) => {
  data.addList.splice(index, 1);
};
// 计算属性
const num1 = computed(() => {
  return data.addList.filter((ele) => ele.flg == false).length;
});
const num2 = computed(() => {
  return data.addList.filter((ele) => ele.flg == true).length;
});
// 解构
const { input, addList } = toRefs(data);
</script>

<template>
  <div class="home">
    <div class="home_box">
      <div class="home_header">
        <p>Todolist</p>
        <input
          type="text"
          placeholder="Todolist"
          v-model="input"
          @keydown.enter="addInfo"
        /><button @click="addInfo">添加</button>
      </div>
      <div class="chen">
        <h2>未完成</h2>
        <div v-for="(item, index) in data.addList" :key="index">
          <li v-if="item.flg == false">
            <input type="checkbox" v-model="item.flg" />
            <span>{{ item.name }}</span>
            <span>{{ item.data }}</span>
            <span @click="del(index)" class="del">删除</span>
          </li>
        </div>
      </div>
      <div class="chen">
        <h2>已完成</h2>
        <div v-for="(item, index) in addList" :key="index">
          <li v-if="item.flg == true" class="chenli">
            <input type="checkbox" v-model="item.flg" />
            <span>{{ item.name }}</span>
            <span>{{ item.data }}</span>
            <span @click="del(index)" class="del">删除</span>
          </li>
        </div>
      </div>
      <div class="footer">
        <span>全部:{{ addList.length }}</span>
        <span>未完成:{{ num1 }}</span>
        <span>已完成:{{ num2 }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  background: #a6b3b9;
  margin: auto;
  .home_box {
    width: 100%;
    .home_header {
      color: #fff;
      width: 100%;
      height: 70px;
      line-height: 80px;
      background: #1c2d39;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        margin-right: 100px;
      }
      button {
        margin-left: 100px;
        width: 100px;
        height: 40px;
      }
      input {
        width: 300px;
        height: 40px;
        outline: none;
        border-radius: 10px;
      }
    }
    .chen {
      margin: 50px auto;
      width: 800px;
      border: 1px solid #000;
      li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        background: #ccc;
        margin-top: 10px;
        input {
          margin-left: 20px;
        }
        .del {
          display: block;
          margin-right: 20px;
        }
      }
      .chenli {
        background: #1c2d39;
        color: #fff;
      }
    }
    .footer {
      display: flex;
      span {
        margin: auto;
      }
    }
  }
}
</style>
